<template>
  <div class="page">
    <!-- new UI -->
    <div class="index-container">
      <div class="card-logo-wrapper mark">
        <img class="app-logo" :src="mainLogo">
        <div class="logo-text-wrapper">
          <div class="text18 yzu">扬州大学</div>
          <div class="text18 weapp-name">22世纪家庭大脑</div>
        </div>
      </div>

      <div class="text14 device-list mark">设备列表</div>

      <scroll-view class="scroll-content" scroll-y :style="{ height: scrollHeight + 'px' }">

        <div class="card-device-item" v-if="!device[0]">
          <div class="text20">没有在线设备</div>
        </div>

        <div v-for="item in device" :key="item">
          <div class="blank"></div>
          <navigator
            :url="'../list/list?cid='+item.client_id + '&username=' + item.username"
            class="card-device-item"
          >
            <div class="icon-pump iconfont icon-shuibeng"></div>
            <div class="text16 device-id">{{item.client_id}}</div>
            <div class="device-status-wrapper">
              <div :class="item.clean_sess == true ? 'icon-device-on' : 'icon-device-off'"></div>
              <div class="text12 device-status">{{item.clean_sess == true ? '运行中' : '已关闭'}}</div>
            </div>
            <div class="icon-more iconfont icon-you"></div>
          </navigator>
          <div class="blank"></div>
        </div>
      </scroll-view>

      <div class="refresh-wrapper mark" @click="doConnect">
        <div class="icon-refresh iconfont icon-shuaxin"></div>
        <div class="text12 refresh">刷新设备</div>
      </div>
      
    </div>
  </div>
</template>

<script>
import { Client, Message } from "paho-wxapp";
import base64 from "../../../static/images/base64";
import { setTimeout } from "timers";
var client = null;
export default {
  data() {
    return {
      device: [
        {
          client_id: "text",
          username: "admin"
        }
      ],
      icon20: base64.icon20,
      icon60: base64.icon60,
      image: "/static/images/icon_nav_button.png",
      mainLogo: "/static/images/logo-copy.png",
      scrollHeight: null
    };
  },
  onLoad() {
    wx.createSelectorQuery()
      .selectAll(".mark")
      .boundingClientRect(rects => {
        let heightAll = 0;
        rects.map((currentValue, index, arr) => {
          heightAll = heightAll + currentValue.height;
        });
        this.scrollHeight =
          wx.getSystemInfoSync().windowHeight - heightAll - 50;
      })
      .exec();
  },
  beforeMount() {},
  mounted() {
    console.log(this.$store.state.cid);
    this.doConnect();
  },
  methods: {
    doConnect: function() {
      var that = this;
      wx.request({
        url:
          "https://www.easywork.net.cn/dashboard/nodes/emq@127.0.0.1/clients", //emqtt,http api,获取在线终端列表
        header: {
          Authorization: "Basic YWRtaW46cHVibGlj" //鉴权
        },
        success: function(res) {
          console.log(res);
          if (res.data.result.objects) that.device = res.data.result.objects;
          console.log(that.device);
        }
      });
    },
    subscribe: function(topic) {
      client.subscribe(topic, {
        qos: 2,
        onSuccess: function() {
          console.log(`订阅主题：${topic}`);
        }
      });
    },
    onShareAppMessage: {}
  }
};
</script>

<style>
.page {
  width: 100%;
  height: 100%;
}

.index-container {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: -webkit-linear-gradient(
    -45deg,
    rgba(72, 0, 121, 0.8),
    rgba(0, 28, 111, 1)
  );
}

.card-logo-wrapper {
  width: 680rpx;
  height: 340rpx;
  /* -webkit-filter: blur(10px); */
  overflow: hidden;
  box-shadow: 0 10rpx 60rpx rgba(0, 0, 0, 0.2);
  margin: 40rpx 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 40rpx;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.app-logo {
  width: 200rpx;
  height: 200rpx;
  margin-right: 80rpx;
}

.logo-text-wrapper {
  display: flex;
  flex-direction: column;
  height: 100rpx;
  justify-content: space-around;
}

.device-list {
  align-self: flex-start;
  margin-left: 35rpx;
  color: white;
  opacity: 0.7;
  margin-bottom: 20rpx;
}

.scroll-content {
  width: 100%;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
}

/* 防止主体margin-top导致的scroll-view滚动 */
.blank {
  width: 100%;
  height: 10rpx;
}

.card-device-item {
  margin: 0 35rpx;
  height: 140rpx;
  border-radius: 40rpx;
  background-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 5rpx 40rpx rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}

.icon-pump {
  color: white;
  font-size: 50rpx;
  margin-left: 40rpx;
}

.device-id {
  width: 260rpx;
  margin-left: 40rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.device-status-wrapper {
  margin-left: auto;
  margin-right: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.icon-device-on {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  background-color: #00ff00;
  box-shadow: 0 0 10rpx rgba(0, 255, 0, 1);
}

.icon-device-off {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  background-color: #ff3300;
  box-shadow: 0 0 10rpx rgba(255, 51, 0, 1);
}

.device-status {
  margin-left: 12rpx;
  opacity: 0.8;
}

.icon-more {
  font-size: 30rpx;
  color: white;
  margin-right: 30rpx;
  opacity: 0.7;
}

.refresh-wrapper {
  position: absolute;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.icon-refresh {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 40rpx;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 30rpx;
  box-shadow: 0 0 0 2rpx rgba(255, 255, 255, 0.6);
  -webkit-animation: refreshing 1.5s ease-in-out 1;
}

.icon-refresh:active {
  -webkit-animation: refreshing1 1.5s ease-in-out 1;
}

@-webkit-keyframes refreshing {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(700deg);
  }
}

@-webkit-keyframes refreshing1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(700deg);
  }
}

.refresh {
  opacity: 0.8;
}

.text12 {
  color: white;
  font-size: 24rpx;
}

.text14 {
  color: white;
  font-size: 28rpx;
}

.text16 {
  color: white;
  font-size: 32rpx;
}

.text18 {
  color: white;
  font-size: 36rpx;
}

.text20 {
  color: white;
  font-size: 28rpx;
  width: 100%;
  text-align:center;
}
</style>
